<template>
    <div>
      <!-- 面包屑导航条 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>数据中心</el-breadcrumb-item>
        <el-breadcrumb-item>联系人管理</el-breadcrumb-item>
        <el-breadcrumb-item v-if="AddLinkManForm.id==null">添加联系人</el-breadcrumb-item>
        <el-breadcrumb-item v-if="AddLinkManForm.id!=null">修改联系人</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span v-if="AddLinkManForm.id==null">添加联系人</span>
          <span v-if="AddLinkManForm.id!=null">修改联系人</span>
          <el-button style="float: right; padding: 3px 0" icon="el-icon-close" circle @click="toList"></el-button>
          <el-button style="float: right; padding: 3px 50px" type="text" @click="addLinkMan" el-icon-close>保存</el-button>
        </div>
        <div>
        </div>
        <el-form ref="form" :model="AddLinkManForm" label-width="80px">
          <el-row :gutter="100">
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item label="姓名">
                  <el-input v-model="AddLinkManForm.name"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item label="性别">
                  <template>
                    <el-radio v-model="AddLinkManForm.sex" :label="0">男</el-radio>
                    <el-radio v-model="AddLinkManForm.sex" :label="1">女</el-radio>
                  </template>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
            <el-row :gutter="100">
              <el-col :span="12">
                <div class="grid-content bg-purple">
                  <el-form-item label="电话">
                    <el-input v-model="AddLinkManForm.tel"></el-input>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="grid-content bg-purple">
                    <el-form-item label="邮箱">
                      <el-input v-model="AddLinkManForm.email"></el-input>
                    </el-form-item>
                </div>
              </el-col>
            </el-row>
          <el-row :gutter="100">
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item label="收件地址">
                  <el-input v-model="AddLinkManForm.recvAddress"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item label="职位">
                  <template>
                    <el-select v-model="AddLinkManForm.position" placeholder="请选择">
                      <el-option
                        key="0"
                        label="董事长"
                        value="0">
                      </el-option>
                      <el-option
                        key="1"
                        label="经理"
                        value="1">
                      </el-option>
                      <el-option
                        key="2"
                        label="组长"
                        value="2">
                      </el-option>
                      <el-option
                        key="3"
                        label="销售"
                        value="3">
                      </el-option>
                      <el-option
                        key="4"
                        label="工艺员"
                        value="4">
                      </el-option>
                    </el-select>
                  </template>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="100">
            <el-col :span="24">
              <div class="grid-content bg-purple">
                <el-form-item label="描述">
                  <div style="margin: 20px 0;"></div>
                  <el-input
                    type="textarea"
                    placeholder="请输入内容"
                    v-model="AddLinkManForm.remarks"
                    maxlength="30"
                    show-word-limit
                  >
                  </el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="grid-content bg-purple">
                <el-form-item label="对应客户">
                  <template>
                    <el-select v-model="AddLinkManForm.customerId" placeholder="请选择">
                      <el-option
                        v-for="item in CustomerList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                    </el-select>
                  </template>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

        </el-form>
      </el-card>

    </div>
</template>

<script>
    export default {
        name: "AddLinkMan",
      data(){
          return{
            AddLinkManForm:{},
            options:[],
            id:"",
            CustomerList:[]
          }
      },
      methods:{
        getCustomerList:function(){
          this.$http.post("/linkman/getCustomerList").then((res)=>{
            this.CustomerList = res.data.result;
            }
          )
        },
          searchData:function(id){
            debugger;
            this.$http.post("/linkman/LookDetail/"+id).then((res)=>{
              this.AddLinkManForm = res.data.result;
            })
          },
        toList:function () {
          this.$router.push('/linkmanList');
        },
        addLinkMan:function () {
          this.$http.post("/linkman/addLinkMan",this.AddLinkManForm).then((res)=>{
            if (res.data.success){
              this.$message({
                message:"保存成功",
                type:"success"
              })
              this.$router.push('/linkmanList');
            }else{
              this.$message.error("保存失败！");
            }
            }
          )
        }
      },
      mounted() {
        this.id = this.$route.query.id;
          if (this.id!=null){
            this.searchData(this.id);
          }
          this.getCustomerList();
      }

    }
</script>

<style scoped>

  .el-col {
    border-radius: 4px;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 1000px;
  }
</style>
